<template>
  <el-dialog
    width="562px"
    :visible="visible"
    :title="title"
    class="add-apply-dialog"
    align-center
    @opened="handleDialogOpen"
    @close="closeDialog"
  >
    <el-form
      :model="applyForm"
      :rules="applyRules"
      ref="applyFormRef"
      label-width="90px"
    >
      <el-form-item label="审核状态" prop="applyStatus">
        <el-radio-group v-model="applyForm.applyStatus">
          <el-radio label="-1">通过</el-radio>
          <el-radio label="1">退回修改</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="审核理由" prop="applyCause">
        <el-input v-model="applyForm.applyCause" type="textarea" :rows="2" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="onSubmit"> 确定 </el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { Message as ElMessage } from 'element-ui'
import { addApplyRecord } from '@/api/question'

const props = defineProps({
  pkid: {
    type: String,
    default: '',
  },
  type: {
    type: String,
    default: 'street',
  },
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '审核',
  },
})

const options = [
  {
    label: '通过',
    value: '-1',
  },
  {
    label: '退回修改',
    value: '1',
  },
]

const emit = defineEmits(['closeDialog'])

const closeDialog = () => {
  emit('closeDialog')
}

const applyForm = reactive({
  resourceId: '',
  applyStatus: '',
  applyCause: '',
  resourceType: undefined,
})

const applyFormRef = ref()

const applyRules = reactive({
  applyStatus: [
    {
      required: true,
      message: '审核状态不能为空',
      trigger: 'change',
    },
  ],
})

const onSubmit = () => {
  applyFormRef.value?.validate((valid) => {
    if (valid) {
      addApplyRecord(applyForm).then((res) => {
        if (res.success) {
          ElMessage.success('审核成功！')
          emit('closeDialog', 'checked')
        } else {
          ElMessage.error(res.message)
        }
      })
    }
  })
}

const getResourceTypeByType = (type) => {
  let _type = 2
  if (type.includes('community')) {
    _type = 3
  } else if (type.includes('street')) {
    _type = 4
  } else if (type.includes('region')) {
    _type = 5
  } else if (type.includes('residence')) {
    _type = 2
  }
  return _type
}

const handleDialogOpen = () => {
  applyFormRef.value?.resetFields()
  if (props.pkid) {
    applyForm.resourceId = props.pkid
    applyForm.resourceType = getResourceTypeByType(props.type)
  }
  if (props.title === '通过') {
    applyForm.applyStatus = '-1'
  } else {
    applyForm.applyStatus = '1'
  }
}
</script>

<style lang="scss">
.add-apply-dialog {
  //width: 562px;
  //height: 326px;
  //background: #ffffff;
  //border-radius: 4px;

  .el-dialog__header {
    border-bottom: 1px solid #e5e5e5;

    .el-dialog__title {
      width: 64px;
      height: 16px;
      font-size: 16px;
      font-weight: bold;
      color: #27475f;
    }
  }

  .el-form {
    .el-form-item {
      min-height: 42px;
      margin-bottom: 21px;
      align-items: center;
    }

    .el-select {
      width: 100%;
    }
  }

  .el-dialog__footer {
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
  }

  .dialog-footer {
    width: 100%;
    height: 100%;
    text-align: center;
  }
}
</style>
